<template>
	<view class="c-transition" :class="[customClass,startClass,actClass]" :style="'transition-duration:'+actDuration+'ms;'">
		<slot />
	</view>
</template>

<script>
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			half:{ //是否开启半场动画
				type:Boolean,
				default:false
			},
			duration:{
				type:Object,
				default:{enter:1000,leave:1000}
			},
			customClass:{
				type:String,
			},
			enterClass:{
				type:String,
			},
			enterActiveClass:{
				type:String,
			},
			enterToClass:{
				type:String,
			},
			leaveClass:{
				type:String,
			},
			leaveActiveClass:{
				type:String,
			},
			leaveToClass:{
				type:String,
			},
		},
		data(){
			return{
				actClass:"",
				actDuration:0,
				startClass:"",
				stime:null
			}
		},
		created() {
			this.beforeEnter()
		},
		watch:{
			show:{
				handler:function(e){
					const that = this;
					let stime = null;
					if(e){
						this.enter()
						this.afterEnter()
						clearTimeout(this.stime)
						if(this.half){
							this.stime = setTimeout(function(){
								that.halfFun()
							},that.duration.enter)
						}else{
							this.stime = setTimeout(function(){
								that.beforeLeave()
							},that.duration.enter)
						}
					}else{
						if(!this.half){
							clearTimeout(this.stime)
							this.leave()
							this.afterLeave()
							this.stime = setTimeout(function(){
								that.close()
							},that.duration.leave)
						}
					}
				},
				immediate:false
			}
		},
		methods:{
			beforeEnter:function(el){
				this.startClass = this.enterClass
			},
			enter:function(){
				this.startClass = "" //清空开始时样式
				this.actClass = this.enterClass + " " + this.enterActiveClass
				this.actDuration = this.duration.enter
			},
			afterEnter:function(){
				this.actClass = this.enterActiveClass + " " + this.enterToClass
			},
			beforeLeave:function(){
				this.actDuration = 0
				this.actClass = ""
				this.startClass = this.leaveClass
			},
			leave:function(){
				this.startClass = "" //清空开始时样式
				this.actClass = this.leaveClass + " " + this.leaveActiveClass
				this.actDuration = this.duration.leave
			},
			afterLeave:function(){
				this.actClass = this.leaveActiveClass + " " + this.leaveToClass
			},
			close:function(){
				this.actClass = ""
				this.startClass = this.enterClass //复位开始时样式
				this.actDuration = 0
			},
			halfFun:function(){
				this.actClass = ""
				this.startClass = this.enterClass //复位开始时样式
				this.actDuration = 0
				this.$emit("halfClose")  //外部show复位
			}
		}
	}
</script>

<style scoped>
	.c-transition{
	}
</style>
